<template>
	<!-- 领券中心 -->
	<!-- 周一航 2023-4-6 -->
	<view>
		<view class="body">
			<image src="http://101.43.223.224:8765/image/getImageById?id=311" style="width: 100%;"></image>
			<view class="contents">
				<u-subsection
									:list="list"
									:current="current1"
									activeColor="#f56c6c"
									@change="change1"
									fontSize="32rpx"
									bgColor="#fff"
								customStyle="width:50%;margin: 0 auto;border-radius: 500px">
				</u-subsection>
				<!-- 优惠券 -->
				<view class="collar" v-for="(item,index) in coupon" :key="index" v-if="item.threshold === 0 && current1 === 0">
					<view class="collar_two">
						<view class="collar_three">
							满 {{item.full}} 减 {{item.discounts}} 可用
						</view>
						<view v-if="item.couponId != null" @click="received()">
								已领劵
						</view>
						<view v-else @click="insertUserCoupon(item)">
								立即领劵
						</view>
					</view>
				</view>
				<view class="collar" v-for="(item,index) in coupon" :key="index" v-if="item.threshold === 1 && current1 === 1">
					<view class="collar_two">
						<view class="collar_three">
							￥{{item.discounts}} 无门槛立减券
						</view>
						<view v-if="item.couponId != null" @click="received()">
								已领劵
						</view>
						<view v-else @click="insertUserCoupon(item)">
								立即领劵
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分段器下标
				current1: 0,
				// 分段器数组
				list: ['满减券', '无门槛'],
				// 优惠券
				coupon: [],
				// 用户信息
				userInfo: {}
			}
		},
		onLoad(){
			// 查询用户是否领取过该优惠券
			this.selectUserCoupon()
		},
		methods: {
			// 立即领取优惠券
			insertUserCoupon(item){
				this.$myRequest({
					url: '/newDaily/insertUserCoupon',
					method: 'POST',
					data: {
						userId: this.userInfo.id,
						couponId: item.id,
						expireTime: item.expireTime
					}
				}).then(res => {
					if(res.data.flag){
						this.selectUserCoupon()
						uni.showToast({
							title: '领取成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			received(){
				uni.showToast({
					title: '您已领取该优惠券',
					icon: 'none',
					duration: 2000
				})
			},
			// 查询用户是否领取过该优惠券
			selectUserCoupon(){
				this.userInfo = wx.getStorageSync('user')
				this.$myRequest({
					url: '/newDaily/selectUserCoupon',
					data: {
						userId: this.userInfo.id
					}
				}).then(res => {
					if(res.data.flag){
						this.coupon = res.data.data
					}
				})
			},
			// 分段器改变时修改数据
			change1(index) {
				this.current1 = index
			}
		}
	}
</script>

<style>
page{
	background: #D6C9CB;
}
.body{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('http://101.43.223.224:8765/image/getImageById?id=312');
}
.contents{
	width: 96%;
	margin: 0 auto;
}
.collar{
	width: 100%;
	height: 160rpx;
	background-color: #F17D8C;
	border-radius: 10px;
	color: #fff;
	margin-top: 3%;
}
.collar_two{
	width: 90%;
	height: 120rpx;
	border: 1px dotted #fff;
	margin: 2.5% 4.5%;
	text-align: center;
	line-height: 120rpx;
	float: left;
}
.collar_three{
	width: 60%;
	border-right: 1px dotted #fff;
	height: 120rpx;
	font-size: 18px;
	float: left;
}
</style>
